<template>
  <!-- 方案的新建和修改弹出的对话框 -->
  <div class="planDialog">
    <el-dialog v-model="dialogVisible" :before-close="handleClose" width="65%" height="80%">
      <template #header>
        <div class="my-header">
          <div class="title-hr"></div>
          <div>
            {{ '新建/修改' }}
          </div>
        </div>
      </template>
      <div class="scheme-box">
        <el-form
          ref="ruleFormRef"
          :model="paramsObj"
          label-width="auto"
          class="demo-ruleForm"
          status-icon
          :validate-on-rule-change="false"
          :rules="rules"
        >
          <el-row>
            <div class="base-title">基本信息</div>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="方案名称：" prop="scName">
                <el-input placeholder="请输入" v-model="paramsObj.scName" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <div class="base-title">时间信息</div>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="预报开始时间：" prop="fcTime">
                <div>
                  <el-date-picker
                    v-model="paramsObj.startTime"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    type="datetime"
                    placeholder="选择日期"
                  ></el-date-picker>
                </div> </el-form-item
            ></el-col>
            <el-col :span="8">
              <el-form-item label="预报结束时间：" prop="fcTime">
                <div>
                  <el-date-picker
                    v-model="paramsObj.endTime"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    type="datetime"
                    placeholder="选择日期"
                  ></el-date-picker>
                </div> </el-form-item
            ></el-col>
          </el-row>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="handleSave">保存</el-button>
          <el-button @click="handleClose()">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, defineExpose } from 'vue'
import { ElMessage } from 'element-plus'
import {
  // 添加
  addAirainList,
  // 修改
  updateAirainList
} from '@/services/modules/intelligent-rainfall/intelligent-rainfall.js'
const paramsObj = ref({})
const ruleFormRef = ref(null)
const dialogVisible = ref(false)
const rules = {
  scName: [{ required: true, message: '请输入方案名称', trigger: 'blur' }],
  startTime: [{ required: true, message: '请选择开始时间', trigger: 'blur' }],
  endTime: [{ required: true, message: '请输入结束时间', trigger: 'blur' }]
}
const emit = defineEmits(['handleRefresh'])

// 打开弹框 formScid方案id
function handleOpenModal(watershedId, row) {
  dialogVisible.value = true
  paramsObj.value.zoneId = watershedId
  if (row?.id) {
    paramsObj.value.id = row.id
    paramsObj.value.scName = row.sc_name
    paramsObj.value.startTime = row.start_time
    paramsObj.value.endTime = row.end_time
  }
}

// 关闭弹框的回调
function handleClose() {
  // 关闭弹框并将之前内容置空
  ruleFormRef.value.resetFields()
  paramsObj.value = {}
  dialogVisible.value = false
}

// 保存方案
function handleSave() {
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      if (!paramsObj.value.id) {
        const res = await addAirainList(paramsObj.value)
        if (res.code === 200) {
          ElMessage.success('新建成功')
        }
      } else {
        const res = await updateAirainList(paramsObj.value)
        if (res.code === 200) {
          ElMessage.success('修改成功')
        }
      }
      handleClose()
      // 关闭弹框并刷新方案列表
      emit('handleRefresh')
    }
  })
}

defineExpose({ handleOpenModal })
</script>

<style lang="less" scoped>
.planDialog {
  width: 100%;
  height: 100%;
  :deep(.el-overlay) {
    width: 100%;
    height: 100%;
    .el-overlay-dialog {
      width: 100%;
      height: 100%;
      :deep(.el-dialog) {
        width: 100%;
        height: 100%;
        margin: 0 auto;
      }
    }
  }

  .my-header {
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    height: 35px;
    border-bottom: 2px solid #eee;
    font-size: 21px;
    .title-hr {
      height: 18px;
      border: #4fc0f1 2px solid;
      margin-right: 10px;
    }
  }
  .scheme-box {
    .el-col {
      // margin-left: 20px;
    }
    // height: 30vh;
    :deep(.el-form) {
      height: 100%;
      // .el-form-item__label-wrap {
      //   margin-left: 50px;
      // }
    }
    :deep(.el-row) {
      // padding-left: 20px;
    }
    .flex-bottom {
      display: flex;
      align-items: center;

      .el-form-item {
        margin-bottom: 10px;
        // margin-left: 12px;
      }
    }
    .table-height {
      margin-top: 20px;
      height: 180px;
      :deep(.el-table--fit) {
        height: 100%;
      }
      // overflow-y: auto;
      // margin-bottom: 20px;
    }
    .base-title {
      // font-size: 14px !important;
      // margin-left: 15px;
      color: #169bd5;
      margin-bottom: 10px;
    }
  }
}
</style>
